<template>
    <div>
      <div v-if="isshow">
          <!-- 密码输入框 -->
          <van-password-input
            :value="value"
            :mask="false"
            info="密码为 6 位数字"
            :error-info="errorInfo"
            :focused="showKeyboard"
            @focus="showKeyboard = true"
          />
          <!-- 数字键盘 -->
          <van-number-keyboard
            v-model="value"
            :show="showKeyboard"
            @blur="showKeyboard = false"
          />
      </div>
      <div v-else class="back">

      </div>
        <tabbar/>
        <message />
    </div>
</template>

<script>
import Tabbar from '../../components/Tabbar.vue'
import Message from '../../components/Message'
import { fetchCartItems } from '../../api/index'
import { getToken } from '../../utils/index'
// import '../../assets/css/back'
export default {
  data () {
    return {
      value: '',
      errorInfo: '',
      showKeyboard: true,
      isshow: true
    }
  },
  created () {
    this.fetchCartItems()
  },
  methods: {
    // 角标
    fetchCartItems () {
      fetchCartItems({
        token: getToken()
      }).then(res => {
        if (res.data.code === 0) {
          this.$store.commit('cart/vuxcart', {
            items: res.data.data.items,
            buyNumber: res.data.data.number
          })
        }
      })
    }
  },
  watch: {
    value (value) {
      if (value.length === 6 && value !== '123455') {
        this.errorInfo = '密码错误'
        this.$router.push('/home')
      }
      if (value.length === 6 && value === '123455') {
        this.errorInfo = '密码正确'
        this.isshow = false
      }
    }
  },
  components: { Tabbar, Message }
}
</script>

<style lang="scss" scoped>
@import '../../assets/css/back'
</style>
